<template>
  <div class="senior-input flex-col-start" @click.stop>
      <div class="senior-input-box" @click="showSeniorBox=true">
        <i class="el-icon-search" ></i>
        <input v-model="value" class="input" v-bind="$attrs" @keyup.enter="handleSearch" >
      </div>

      <div class="senior-box flex-col-start" v-show="showSeniorBox">
        <div class="senior-box-item">
          <div class="label"> 历史记录</div>
<!--          历史记录内容-->
          <div class="flex-row-start" style="flex-wrap: wrap;width: 90%;height: 80px;overflow-y: scroll">
            <el-tag
                class="history-record-item"
                v-for="(item,index) in historyList"
                :key="item"
                closable
                effect="plain"
                :type="computeTagType(index)"
                @click="handleClickHistoryItem(item)"
                @close="handleCloseHistoryItem(value,index)"
            >
              {{item}}
            </el-tag>

          </div>
        </div>
        <div class="senior-box-item">
          <div class="label"> 热门城市</div>
        </div>
        <div class="senior-box-item">
          <div class="label"> 热门公寓</div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "SeniorInput",
  props:{
    value:{
      type:String
    }

  },

  model:{
    prop: 'value',
    event: 'changes'

  },
  data() {
    return {
      showSeniorBox:false,
      historyList:[],
      historyKey:"search_history"
    }
  },
  methods: {
    handleClose(e){
      this.showSeniorBox=false

    },
    handleClickHistoryItem(value){
      console.log(value)
      this.value=value
    },
    handleCloseHistoryItem(value,index){
      this.historyList.splice(index,1)
      localStorage.setItem(this.historyKey,this.historyList)
    },
    handleSearch(){
      this.storeHistory(this.value)
      this.historyList.unshift(this.value)
      this.$emit("search")
    },
    storeHistory(value){
      let item = localStorage.getItem(this.historyKey);
      localStorage.setItem(this.historyKey,value+";"+item)

    },
    getHistory(){
      let item = localStorage.getItem(this.historyKey);
      return item.split(";");
    },
    removeHistory(){

    }
  },
  computed:{
    computeTagType(){

      let arr=['info','warning','danger','success']
      return ( index)=>{
        return arr[index%arr.length]
      }
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClose)
    this.historyList=this.getHistory()

  }
}
</script>

<style scoped lang="less">
  .senior-input{
    position: relative;
    padding: 0.5em;
    border-radius: 3px;
    background-color:#3A3A3A;
    .senior-input-box{
      width: 100%;
      height: 100%;
      i{
        color: white;
        font-size: 10px;
        margin-right: 5px;
      }
      .input{

        outline: none;
        border: none;
        height: 100%;
        width:85%;
        background-color: transparent;
        caret-color: white;
        color: white;

      }
    }

    .senior-box{
      position: absolute;
      left: -100%;
      top: 130%;
      width: 200%;
      background-color: white;
      transform: translateX(50%);
      border-radius: 3px;
      box-shadow: var(--box-shadow);
      border: 2px solid gold;
      .senior-box-item{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        margin-bottom: 15px;

        .label{
          width: 90%;
          font-size: 14px;
          font-weight: 550;
          color: #4d4d4d;
          text-align: left;
        }
        .history-record-item{
          font-size: 14px;
          margin-right: 5px;

        }
      }

    }
  }
</style>